<template>
  <div id="Box">
    <!-- 左部反馈表 -->
    <div id="Box_left">
      <!-- 标题 -->
      <ul class="left_ul">
        <li class="left_li">
          <span>用户反馈</span>
        </li>
      </ul>
      <!-- 反馈表 -->
      <div class="box_center">
        <!-- 反馈界面头像 -->
        <div class="demo-avatar">
          <Avatar src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594375364854&di=11460a8c6d8f286de8bc0d1e6632b684&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D134805739%2C3149757963%26fm%3D214%26gp%3D0.jpg" 
          size="100"/>
        </div>
        <!-- 反馈输入框 -->
        <div class="spit">
          <h3 class="titleText">我们期待您的反馈和建议！</h3>
          
          <div class="textarea-wrap">
            <textarea id="suggest" name="suggest" class="inputarea inputText" v-model="f_content" maxlength="500"></textarea>
          </div>
          <!-- 提交按钮 -->
          <div class="confirm-btn">
            <button class="cu-btn" type="submit" id="submit" @click="feedSubmit">提交</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边问题表 -->
    <div id="Box_right">
      <h2 class="title"><span class="text">常见问题</span></h2>
      <!-- 问题1 -->
      <Tooltip placement="left-start">
        <div class="qus" >我发起了项目审核需要多久时间？</div>
        <div slot="content">
          <p>您好，项目资质审核的时间是7个工</p>
          <p>作日，企业资质审核通过后，您可</p>
          <p>以发起项目，项目审核周期为15个</p>
          <p>工作日，15个工作日以后您可以在</p>
          <p>右上方“我的资产”—页面左侧“我的</p>
          <p>众筹”— “我发起的”查询您发起项目</p>
          <p>的审核状态。</p>
        </div>
      </Tooltip>
      <!-- 问题2 -->
      <Tooltip placement="left-start">
        <div class="qus" >发起项目我需要准备什么资料吗？</div>
        <div slot="content">
          <p>您好，目前平台只允许企业发起呢，</p>
          <p>需要您提供您的营业执照、组织机</p>
          <p>构代码证和税务登记证，银行开户</p>
          <p>许可证，法人身份证正反面等资料。</p>
        </div>
      </Tooltip>
      <!-- 问题3 -->
      <Tooltip placement="left-start">
        <div class="qus" >发起项目我需要准备什么行业资质吗？</div>
        <div slot="content">
          <p>您好，根据不同的行业，您需要的</p>
          <p>资质是不一样的呢，请您仔细阅读</p>
          <p>社区中的公告呢。</p>
        </div>
      </Tooltip>
      <!-- 问题4 -->
      <Tooltip placement="left-start">
        <div class="qus" >怎样查询我支持过的产品众筹订单？</div>
        <div slot="content">
          <p>您好，您可以在右上方“我的资产”</p>
          <p>—页面左侧“我的众筹”找到您支持</p>
          <p>的订单。</p>
        </div>
      </Tooltip>
      <!-- 问题5 -->
      <Tooltip placement="left-start">
        <div class="qus" >如何查看自己支持的商品是否发货？</div>
        <div slot="content">
          <p>您好，产品众筹的产品是在众筹成</p>
          <p>功后的30天内发货的，具体的回报</p>
          <p>日期，请参照项目档位设置中预计</p>
          <p>回报时间，如果项目延期，会在项</p>
          <p>目进展和话题中公布，请您及时关</p>
          <p>注项目进展，同时您也可以在话题</p>
          <p>中搜索项目进展。</p>
        </div>
      </Tooltip>
      <!-- 问题6 -->
      <Tooltip placement="left-start">
        <div class="qus" >我购买的商品发放回报、开具发票及售后服务或者有质量问题，我该怎么操作？</div>
        <div slot="content">
          <p>您好，众筹成功后，发放回报、开</p>
          <p>具发票及售后服务等事项，需要您</p>
          <p>与项目方进行沟通解决的，项目详</p>
          <p>情页面有项目方具体的联系方式的，</p>
          <p>谢谢您的支持，祝您生活愉快！</p>
        </div>
      </Tooltip>
    </div>
  </div>
</template>
<script>
import {Front_Complaint} from "../../../server/home.js"
// import { mapGetters } from 'vuex'


export default {
  data(){
    return{
      isLogin: window.localStorage.getItem("front_token") != null,
      f_content:'',

    }
  },
  methods:{
    // 点击提交按钮
    feedSubmit(){
      // alert(1);
      let token = window.localStorage.getItem("front_token");//获取用户token
      const feedCon = this.f_content//反馈的信息
  
      // 判断用户是否登录
      if(token == null){
        this.$Message.error('请先登录');
      }else{
        if(feedCon == '' || feedCon.indexOf(" ")>=0){
          this.$Message.warning('输入内容为空或空格时无法提交');
        }else{
          // 将反馈内容和用户token发到后台
          Front_Complaint(token,feedCon).then(res=>{
          
            if(res.err_code==1000){//成功
              this.$Message.success(res.message);
              this.$router.push('/front/home');
            }else{//失败
              this.$Message.error(res.message);
            }
          })
        }
        
      }

    },
  }
}
</script>
<style scoped>
  #Box{
    /* border: 1px solid black; */
    width: 1150px;
    margin: 0 auto;
    margin-top: 20px;
    /* height: 1000px; */
  }
  #Box_left{
    /* border: 1px solid #eee; */
    width: 780px;
    float: left;
    padding: 25px 40px 70px;
    background-color: #ffffff;
    /* height: 1000px; */
  }
  .left_ul{
    border-bottom: 1px solid #eee;
    height: 43px;
  }
  .left_li{
    /* border: 1px solid black; */
    width: 120px;
    float: left;
  }
  .left_li span{
    padding: 0 20px;
    padding-bottom: 10px;
    height: 42px;
    border-bottom: 2px solid #ea544a;
    font-size: 20px;
    font-weight: 700;
    line-height: 43px;
    color: #ea544a;
  }
  .box_center{
    /* border: 1px solid black; */
    margin-top: 30px;
    float: left;
  }
  .demo-avatar{
    float: left;
  }
  .spit{
    /* border: 1px solid black; */
    width: 570px;
    float: left;
    margin-left: 25px;
  }
  .titleText{
    font-size: 20px;
    padding: 30px 0 20px;
    color: #323232;
    font-weight: 500;
  }
  #feedText{
    border: solid 0px;
    outline: none;
  }
  .textarea-wrap{
    border: 1px solid #ccc;
  }
  .inputarea{
    border: none;
    font: 14px/24px microsoft yahei;
    padding: 13px 25px;
    width: 565px;
    height: 220px;
    overflow: auto;
    outline: 0;
    resize: none;
  }
  .cu-btn{
    padding: 0 55px;
    height: 44px;
    min-width: 64px;
    line-height: 44px;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    border: 1px solid #f52f3e;
    background: #f52f3e;
    margin-top: 20px;
  }
  #Box_right{
    /* border: 1px solid black; */
    width: 340px;
    padding: 15px 30px 50px;
    float: right;
    background-color: #fbfbfc;
    height: 800px;
  }
  .title{
    font: 14px/52px microsoft yahei;
    color: #474e5d;
    text-align: center;
    background: url(https://static.360buyimg.com/finance/serviceCenter/feedback/1.1.0/css/i/dottedbg.png) center center repeat-x;
  }
 
  .qus{
    color: #a5a5a5;
    width: 199px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
    margin-left: 50px;
  }
  .ans-wrap{
    position: absolute;
    top: -10px;
    left: -260px;
    width: 250px;
    padding-right: 20px;
  }
  .ans{
    display: none;
    width: 210px;
    padding: 15px;
    line-height: 23px;
    background: #fff;
    border: 1px solid #f0f0ee;
    border-radius: 3px;
    color: #a5a5a5;
    box-shadow: 2px 2px 8px #e6e6e6, 2px -2px 8px #e6e6e6, -2px -2px 8px #e6e6e6, -2px 2px 8px #e6e6e6;
  }
  .ans s{
    position: absolute;
    width: 0;
    height: 0;
    border-width: 7px;
    border-color: transparent transparent transparent #aaa;
    border-style: dashed dashed dashed solid;
    top: 15px;
    left: 240px;
  }
  
</style>